<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
	<title>Document</title>
	<style type="text/css">
        #div1{
        	width:30px;height:30px;background:green;
        }
        #div2{
        	width:200px;height:150px;background:blue;display: none;
        }
        div{
        	float: left;margin:10px;
        }
	</style>
	<script type="text/javascript">
      
        // window.onload = function (){
        //     var oDiv1 = document.getElementById('div1');
        //     var oDiv2 = document.getElementById('div2');
        //     var timer = null;

        //     oDiv1.onmouseover = function(){
        //     	clearTimeout(timer);
        //     	oDiv2.style.display = 'block';
        //     }

        //     oDiv1.onmouseout = function(){
        //     	timer = setTimeout(function(){
        //     		oDiv2.style.display = 'none'; //打开定时器，500毫秒后再隐藏div2
        //     	},500);
            	
        //     }

        //     oDiv2.onmouseover = function(){
        //     	//移入div2时关掉定时器
        //     	clearTimeout(timer);
        //     }

        //     oDiv2.onmouseout = function (){
        //     	timer = setTimeout(function(){
        //     		oDiv2.style.display = 'none'; 
        //     	},500);
        //     }
        // }
        

        //把相同的代码合并,用连等  类似a=b=c=5
        window.onload = function (){
            var oDiv1 = document.getElementById('div1');
            var oDiv2 = document.getElementById('div2');
            var timer = null;

            oDiv1.onmouseover=oDiv2.onmouseover= function(){
            	clearTimeout(timer);
            	oDiv2.style.display = 'block';
            };

            oDiv1.onmouseout = oDiv2.onmouseout= function(){
            	timer = setTimeout(function(){
            		oDiv2.style.display = 'none'; //打开定时器，500毫秒后再隐藏div2
            	},500);
            	
            };
           
        }


	</script>
</head>
<body>

    <div id="div1"></div>
    <div id="div2"></div>
	
</body>
</html>	